@charset "UTF-8";
/* 引入 */
@import "normalize";
$w:10.8rem;

/* 框架搭建  start */
html {
    height: 100%;
}

body {
    font-size: .16rem;
    /* 设置为弹性盒子 */
    display: flex;

    height: 100%;
    /* 改变主轴方向 */
    flex-direction: column;
}

header {
    width: $w;
    height: 2.62rem;
    background-color: #aca394;

    .box {
        width: 10.8rem;
        height: 1.12rem;
        // background-color: #aca394;
        overflow: hidden;
        display: flex;
        align-items: center;

        .box-1 {
            width: 9.48rem;
            height: 1.12rem;
            // background-color: #aca394;
            overflow: hidden;

            ul {
                width: 15rem;
                height: 1.12rem;
                display: flex;

                li {
                    height: 1.12rem;
                    line-height: 1.12rem;
                    font-size: .34rem;
                    color: #e4e4da;
                    margin-left: 0.44rem;
                    box-sizing: border-box;

                }

                .lis {
                    font-size: .38rem;
                    color: #fff;
                    border-bottom: 8px solid #f89a16;
                }
            }
        }


        .box-2 {
            width: 1.06rem;
            height: 1.12rem;
            // background-color: #aca394;
            display: flex;
            align-items: center;
            justify-content: center;

            p.iconfont {
                font-size: .5rem;
                color: #fff;
            }
        }
    }

    .box-3 {
        width: 10.8rem;
        height: 1.38rem;
        // background-color: #aca394;
        display: flex;
        align-items: center;
        justify-content: space-around;

        .b1 {
            width: 5.84rem;
            height: 0.85rem;
            background-color: rgba($color: #fff, $alpha: .2);
            border-radius: 50px;
            display: flex;
            align-items: center;
            justify-content: center;

            p.iconfont {
                font-size: .33rem;
                color: #f2ebe5;
            }

            input {
                width: 3.1rem;
                height: 0.35rem;
                border: none;
                outline: none;
                font-size: .33rem;
                // background-color: #c5beb4;
                background-color: rgba($color: #fff, $alpha: .2);
                color: #f2ebe5;
                margin-left: 0.2rem;

                &::placeholder {
                    font-size: .33rem;
                    color: #f2ebe5;
                }
            }
        }

        .b2 {
            width: 4.06rem;
            height: 0.85rem;
            // background-color: #c5beb4;
            background-color: rgba($color: #fff, $alpha: .2);
            border-radius: 50px;
            display: flex;
            align-items: center;
            justify-content: space-around;

            p {
                font-size: .32rem;
                color: #fffef6;
            }
        }
    }
}

footer {
    width: $w;
    height: 1.35rem;
    background-color: #ffffff;

    ul {
        display: flex;
        align-items: center;
        justify-content: space-around;

        li {
            text-align: center;
            p.iconfont {
                font-size: .6rem;
            }

            span {
                display: block;
                font-size: .4rem;
            }

        }

        .lis {
           
            text-align: center;
            p.iconfont {
                font-size: .6rem;
                color: #f99a08;
            }

            span {
                display: block;
                font-size: .4rem;
                color: #f99a08;
            }
        }
    }
}

main {
    flex: 1;
    overflow: hidden;
    background-color: #ffffff;

    .banner {
        min-height: 101%;
        background-color: #ffffff;
    }
}

/* 框架搭建  end *
/* ============================================== */
/* header css  start*/

/* header css  end*/
/* ============================================== */
/* main css  start*/
.banner {
    position: relative;

    >.top {
        position: absolute;
        left: 0px;
        right: 0px;
        top: -1rem;
        background-color: burlywood;
        text-align: center;
        line-height: 1rem;
        font-size: .26rem;
        color: #ffff;
    }

    >.bon {
        position: absolute;
        left: 0px;
        right: 0px;
        bottom: -1rem;
        background-color: burlywood;
        text-align: center;
        line-height: 1rem;
        font-size: .26rem;
        color: #fff;
    }

    .chrw {
        width: 10.8rem;
        height: 2.86rem;
        background-color: #aca394;

        #box {
            width: 10.8rem;
            height: 4.56rem;
            text-align: center;

            .swiper-slide {
                width: 10.26rem;
                height: 4.56rem;

                img {
                    width: 10.26rem;
                    height: 4.56rem;
                }
            }

        }
    }

    .chrbox2 {
        width: $w;
        height: 2.06rem;
        padding-top: 1.8rem;

        ul {
            width: $w;
            height: 2.06rem;
            display: flex;
            align-items: center;
            justify-content: space-around;

            li {
                text-align: center;

                img {
                    width: 0.92rem;
                    height: 0.86rem;
                }

                p {
                    font-size: 0.3rem;
                    color: #434343;
                    padding-top: 0.36rem;
                }
            }
        }
    }

    .chrbox3 {
        img {
            width: 10.8rem;
            height: 3.88rem;
        }
    }

    .chrbox4 {
        width: 10.8rem;
        min-height: 101%;

        .chrbo {
            width: 10.8rem;
            height: 4.88rem;
            display: flex;
            align-items: center;
            justify-content: space-around;

            .chrbo1 {
                width: 5.22rem;
                height: 4.88rem;

                .list-t {
                    width: 100%;
                    height: 0.98rem;
                    line-height: 0.98rem;

                    h3 {
                        font-size: 0.4rem;
                        color: #787878;
                        padding-left: 0.4rem;
                    }
                }

                .list-b {
                    width: $w;
                    height: 2.92rem;
                    display: flex;
                    // align-items: center;

                    .list-l {
                        padding-left: 0.4rem;

                        img {
                            width: 1.78rem;
                            height: 2.54rem;
                        }
                    }

                    .list-r {
                        padding-left: 0.3rem;

                        h3 {
                            padding-top: 0.3rem;
                            font-size: 0.34rem;
                            color: #8d8d8d;
                            padding-bottom: 0.5rem;
                        }

                        p {
                            img {
                                width: 0.27rem;
                                height: 0.34rem;
                            }

                            span {
                                font-size: 0.3rem;
                                color: #b3b3b3;
                                padding-left: 0.2rem;
                            }
                        }
                    }
                }
            }
        }
    }


    .chrbox5 {
        position: fixed;
        right: 0.5rem;
        top: 70%;

        img {
            width: 2.24rem;
            height: 2.24rem;
        }
    }
}

/* main css  end*/
/* ============================================== */
/* footer css  start*/

/* footer css  end*/